<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <style>
    div {
      width: 200px;
      height: 200px;
      font-size: 30px;
    }

    .box1 {
      background: red;
      display: block;
    }

    .box2 {
      background: blue;
      display: none;
    }

    .box3 {
      background: yellow;
      display: none;
    }
  </style>
  <body>
    <div class="container">
      <button class="btn">按钮一</button>
      <button class="btn">按钮二</button>
      <button class="btn">按钮三</button>
      <div class="box1">1</div>
      <div class="box2">2</div>
      <div class="box3">3</div>
    </div>
    <div class="container2">
      <button class="btn">按钮一</button>
      <button class="btn">按钮二</button>
      <button class="btn">按钮三</button>
      <div class="box1">1</div>
      <div class="box2">2</div>
      <div class="box3">3</div>
      <button class="next">下一页</button>
    </div>

    <div class="container3">
      <button class="btn">按钮一</button>
      <button class="btn">按钮二</button>
      <button class="btn">按钮三</button>
      <div class="box1">1</div>
      <div class="box2">2</div>
      <div class="box3">3</div>
    </div>
    <script>
      function Tab(btns, divs) {
        var nowK = 0;
        btns.forEach((btn, k) => {
          btn.onclick = function () {
            console.log(k);
            nowK = k;
            switchTab(k);
          };
        });
        function switchTab(k) {
          divs.forEach((div, key) => {
            if (key == k) {
              div.style.display = "block";
            } else {
              div.style.display = "none";
            }
          });
        }
        return { switchTab: switchTab, nowK: nowK };
      }
      // 特殊功能
      // 第一个选项卡
      var btns = document.querySelectorAll(".container .btn");
      var divs = document.querySelectorAll(".container div");
      Tab(btns, divs);

      // 第二个选项卡
      var btns2 = document.querySelectorAll(".container2 .btn");
      var divs2 = document.querySelectorAll(".container2 div");
      var tab2 = Tab(btns2, divs2);

      // //第二个选项卡 特性功能 ；下一个功能
      var nextBtn = document.querySelector(".next");
      var num = 0;
      nextBtn.onclick = function () {
        tab2.switchTab(num);
        num++;
        if (num == 3) {
          num = 0;
        }
      };
      var btns3 = document.querySelectorAll(".container3 .btn");
      var divs3 = document.querySelectorAll(".container3 div");
      var tab3 = Tab(btns3, divs3);
      var num2 = 0;
      setInterval(() => {
        tab3.switchTab(num2);
        num2++;
        if (num2 == 3) {
          num2 = 0;
        }
      }, 1000);
    </script>
  </body>
</html>
